<template>
	<view class="uni-swiper__warp" :class="{vertical}" :style="verticalStyle">
		<view v-if="mode === 'default'" :style="{ bottom: dots.bottom + 'rpx',left:left,right:right,transform:transform }" class="uni-swiper__dots-box" key="default">
			<view
				v-for="(item, index) in info"
				:style="{
					width: (index === current ? dots.width * 2 : dots.width) + 'rpx',
					height: dots.width / 3 + 'rpx',
					'background-color': index !== current ? dots.backgroundColor : dots.selectedBackgroundColor,
					'border-radius': '0rpx'
				}"
				:key="index"
				class="uni-swiper__dots-item uni-swiper__dots-bar"
			/>
		</view>
		<view v-if="mode === 'dot'" :style="{ bottom: dots.bottom + 'rpx',left:left,right:right,transform:transform }" class="uni-swiper__dots-box" key="dot">
			<view
				v-for="(item, index) in info"
				:style="{
					width: dots.width + 'rpx',
					height: dots.height + 'rpx',
					'background-color': index !== current ? dots.backgroundColor : dots.selectedBackgroundColor,
					border: index !== current ? dots.border : dots.selectedBorder
				}"
				:key="index"
				class="uni-swiper__dots-item"
			/>
		</view>
		<view v-if="mode === 'round'" :style="{ bottom: dots.bottom + 'rpx',left:left,right:right,transform:transform }" class="uni-swiper__dots-box" key="round">
			<view
				v-for="(item, index) in info"
				:class="[index === current && 'uni-swiper__dots-long']"
				:style="{
					width: (index === current ? dots.width * 3 : dots.width) + 'rpx',
					height: dots.height + 'rpx',
					'background-color': index !== current ? dots.backgroundColor : dots.selectedBackgroundColor,
					border: index !== current ? dots.border : dots.selectedBorder
				}"
				:key="index"
				class="uni-swiper__dots-item "
			/>
		</view>
		<view v-if="mode === 'nav'" key="nav" :style="{ 'background-color': dotsStyles.backgroundColor, bottom: '0',left:left,right:right,transform:transform }" class="uni-swiper__dots-box uni-swiper__dots-nav">
			<text :style="{ color: dotsStyles.color }" class="uni-swiper__dots-nav-item">{{ current + 1 + '/' + info.length + ' ' + (field?info[current][field]:'') }}</text>
		</view>
		<view v-if="mode === 'indexes'" key="indexes" :style="{ bottom: dots.bottom + 'rpx',left:left,right:right,transform:transform }" class="uni-swiper__dots-box">
			<view
				v-for="(item, index) in info"
				:style="{
					width: dots.width + 'rpx',
					height: dots.height + 'rpx',
					color: index === current ? dots.selectedColor : dots.color,
					'background-color': index !== current ? dots.backgroundColor : dots.selectedBackgroundColor,
					border: index !== current ? dots.border : dots.selectedBorder
				}"
				:key="index"
				class="uni-swiper__dots-item uni-swiper__dots-indexes"
			>
				<text class="uni-swiper__dots-indexes-text">{{ index + 1 }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'MySwiperDot',
	props: {
		info: {
			type: Array,
			default() {
				return [];
			}
		},
		current: {
			type: Number,
			default: 0
		},
		dotsStyles: {
			type: Object,
			default() {
				return {};
			}
		},
		// 类型 ：default(默认) indexes long nav
		mode: {
			type: String,
			default: 'default'
		},
		// 只在 nav 模式下生效，变量名称
		field: {
			type: String,
			default: ''
		},
		vertical: {
			type: Boolean,
			default: false
		},
		width: {
			type: Number,
			default: 0
		},
		height: {
			type: Number,
			default: 0
		}
	},
	computed:{
		verticalStyle(){
			if(this.vertical){
				return 'width:'+this.height+'rpx;transform:translateX('+this.width+'rpx) rotate(-90deg);'
			}else{
				return ''
			}
		},
		left(){
			if(this.dotsStyles.align === 'left'){
				return this.dotsStyles.left + 'rpx'
			}else if(this.dotsStyles.align === 'center'){
				return '50%'
			}else{
				return ''
			}
		},
		right(){
			if(this.dotsStyles.align === 'right'){
				return this.dotsStyles.right + 'rpx'
			} else {
				return ''
			}
		},
		transform(){
			if(this.dotsStyles.align === 'center'){
				return 'translateX(-50%)'
			}else{
				return ''
			}
		}
	},
	data() {
		return {
			dots: {
				width: 16,
				height: 16,
				align: 'left',
				bottom: 20,
				left: 20,
				right: 0,
				color: '#fff',
				selectedColor: '#fff',
				backgroundColor: 'rgba(0, 0, 0, .3)',
				border: '1px rgba(0, 0, 0, .3) solid',
				selectedBackgroundColor: '#333',
				selectedBorder: '1px rgba(0, 0, 0, .9) solid'
			}
		};
	},
	watch: {
		dotsStyles: {
			handler(){
				this.dots = Object.assign(this.dots, this.dotsStyles);
			},
			immediate: true
		},
		mode: {
			handler(){
				if (this.mode === 'indexes') {
					this.dots.width = 40;
					this.dots.height = 40;
				} else {
					this.dots.width = 16;
					this.dots.height = 16;
				}
			},
			immediate: true
		}
	}
};
</script>

<style lang="scss" scoped>
.uni-swiper__warp {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex: 1;
	flex-direction: column;
	position: relative;
	overflow: unset;
}
.uni-swiper__warp.vertical{
	transform-origin: left bottom;
}

.uni-swiper__dots-box {
	position: absolute;
	bottom: 20rpx;
	// left: 0;
	// right: 0;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex: 1;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.uni-swiper__dots-item {
	width: 16rpx;
	border-radius: 200rpx;
	margin-left: 12rpx;
	background-color: rgba(0, 0, 0, 0.4);
	// transition: width 0.2s linear;  不要取消注释，不然会不能变色
}

.uni-swiper__dots-item:first-child {
	margin: 0;
}

.uni-swiper__dots-default {
	border-radius: 200rpx;
}

.uni-swiper__dots-long {
	border-radius: 100rpx;
}

.uni-swiper__dots-bar {
	border-radius: 100rpx;
}

.uni-swiper__dots-nav {
	bottom: 0rpx;
	height: 80rpx;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex: 1;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.2);
	position: relative;
}

.uni-swiper__dots-nav-item {
	/* overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
	font-size: 24rpx;
	color: #fff;
	margin: 0 30rpx;
}

.uni-swiper__dots-indexes {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	// flex: 1;
	justify-content: center;
	align-items: center;
}

.uni-swiper__dots-indexes-text {
	font-size: 24rpx;
}
</style>
